<template>
  <el-container>
    <el-main>
      <el-card class="box-card" style="font-size: 12px;">

        <el-row>
          <el-col :span="8">
            售后id：
            <el-input
              placeholder="请输入内容"
              v-model="formData.id"
              clearable
              style="width: 215px;"
            ></el-input>
          </el-col>

          

          <el-col :span="3" :offset="9">
            <el-button type="primary">查询</el-button>
            <el-button plain>重置</el-button>
          </el-col>
        </el-row>

        <el-form-item label="订单类型">
          <el-select v-model="formData.orderType" placeholder="请选择">
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryAll">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <el-table :data="tableData" height="450" border style="width: 100%">
          <el-table-column prop="id" label="售后id" ></el-table-column>
          <el-table-column prop="productName" label="商品名称" ></el-table-column>
          <el-table-column prop="orderAllmoney" label="订单总金额" ></el-table-column>
          <el-table-column prop="tuikuanMoney" label="退款金额" ></el-table-column>
          <el-table-column prop="shReason" label="售后原因" ></el-table-column>
          <el-table-column prop="shStatus" label="状态" ></el-table-column>
        </el-table>
      </el-card>
    </el-main>
    <el-footer style="background-color: #ffffff;">
      <el-card class="box-card">
        <el-row>
          <el-col :span="6" :offset="15">
            <el-pagination
              bcakground
              :page-sizes="[5,10,15,20]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total,sizes,prev,pager,next"
              :total="total"
              @next-click="nextPage"
              @prev-click="forwordone"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageSize: 5,
      pageNum: 1,
      isCollapse: true,
      formData: {
       id:""
      },
      merchantOptions: [
        { value: "option1", label: "选项一" },
        { value: "option2", label: "选项二" }
        // 更多选项...
      ],
      provinceCityOptions: [
        { value: "province1", label: "省份一" },
        { value: "city1", label: "城市一" }
        // 更多选项...
      ],
      orderStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      paymentStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      orderTypeOptions: [
        { value: "type1", label: "类型一" }
        // 更多选项...
      ],
      activeIndex: "1",
      menuItems: [
        { icon: require("../../assets/执行请求.png"), description: "执行请求" },
        {
          icon: require("../../assets/整理态 [转换].png"),
          description: "整理态"
        },
        { icon: require("../../assets/查看事例.png"), description: "查看事例" },
        { icon: require("../../assets/耳机.png"), description: "耳机" },
        {
          icon: require("../../assets/密码 验证码.png"),
          description: "验证码"
        },
        { icon: require("../../assets/通话保持.png"), description: "通话保持" },
        { icon: require("../../assets/静音.png"), description: "静音" },
        {
          icon: require("../../assets/外呼-copy.png"),
          description: "外呼"
        },
        { icon: require("../../assets/发送短信.png"), description: "发送短信" },
        {
          icon: require("../../assets/M_结束会话.png"),
          description: "结束会话"
        },
        { icon: require("../../assets/退出.png"), description: "退出" }
      ]
    };
  },
  methods: {
    queryAll(){
      this,this.pageNum = 1
      this.queryShouhouInKefu()
    },
    queryShouhouInKefu() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.formData;
      this.$axios.post("api/order-server/shouhou/queryShouhouInKefu",params).then(res => {
        this.pageNum = res.data.data.pageNum
        this.pageSize = res.data.data.pageSize
        this.total = res.data.data.total
        this.tableData = res.data.data.list
      });
    },
    onCurrentChange(val) {
      this.pageNum = val;
      this.queryShouhouInKefu();
    },
    onSizeChange(val) {
      //最新的pageSize
      this.pageNum = 1;
      this.pageSize = val;
      this.queryShouhouInKefu();
    },
    forwordone(val) {
      this.pageNum = val;
      this.queryShouhouInKefu();
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryShouhouInKefu();
    },
    navigateToComponentA() {
      this.$router.push("/orderQuery");
    },
    navigateToComponentB() {
      this.$router.push("/logisticsQuery");
    },
    navigateToComponentC() {
      this.$router.push("/afterSaleQuery");
    },
    navigateToComponentD() {
      this.$router.push("/userQuery");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.queryShouhouInKefu()
  }
};
</script>

<style scoped>
.menu-with-icons.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去除下划线 */
}

.menu-item-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.icon-description {
  margin-top: -20px;
  font-size: 10px;
}

.menu-item-with-icon img {
  width: 20px;
  height: auto;
}

.el-header {
  background-color: #ffffff;
}

.el-aside {
  background-color: #f4f4f4;
}

.el-main {
  background-color: #ffffff;
}

.el-footer {
  background-color: #f4f4f4;
}
.label {
  font-weight: normal;
}
.value {
  font-weight: bold;
}
</style>